
@extends('layouts.head')
@section('title')
welcome
@endsection
@section('content')
<section class="content-header" id="content-header">
账户管理
</section>

<section class="content" id="content">
<div class="box box-solid">
  <div class="box-header with-border">
    <el-button-group>
          <el-button @click="addUserV = true " type="primary"  size="small" >添加</el-button>
    </el-button-group> 
    <el-button size="small" type=""  @click="yesterday" icon="arrow-left"></el-button>
    <el-date-picker v-model="date" style="width: 120px" size="small" type="date" placeholder="选择日期" > </el-date-picker>
    <el-button  size="small" type="" @click="tomorrow"  icon="arrow-right" ></el-button>
    <el-date-picker v-model="dateMore" style="width: 200px" size="small" type="daterange" placeholder="范围选取" > </el-date-picker>
    <el-input  placeholder="输入关键字"  style="width: 160px" size="small" icon="search" v-model="searchWord" :on-icon-click="search">
</el-input>
  </div>
  <div class="box-body " style="min-height:768px">
         <el-table ref="multipleTable" :data="users" border bordertooltip-effect="dark" border="true" @selection-change="checkOne"   style="width: 100%" >
         <el-table-column type="selection" width="55">  </el-table-column>
            <el-table-column  prop="id" label="Id" > </el-table-column>
            <el-table-column  prop="name" label="姓名" > </el-table-column>
            <el-table-column  prop="email" label="登录帐号" > </el-table-column>
            <el-table-column  prop="created_at" label="创建时间" > </el-table-column>
            <el-table-column label="权限" >
                <template scope="scope">
                    <div v-for="item in rules ">
                      <a v-if="scope.row.id == item.uid"> @{{ item.name }}</a>
                    </div>
                </template>
            </el-table-column>
            <el-table-column fixed="right"  label="操作"  width="160">
              <template scope="scope">
                <el-button-group>
                  <el-button @click="lookRow(scope.row.id, users)" type="warning" icon=" " size="mini" >查看</el-button>
                      <el-button  @click="editRow(scope.row.id, users)" type="primary" icon=" " size="mini">编辑</el-button>
                      <el-button  @click="delRow(scope.row.id, users)" type="danger" icon=" " size="mini">删除</el-button>
                </el-button-group>     
              </template>
            </el-table-column>
          </el-table>
          </br>
          <div class="block">
            <el-pagination @size-change=""  @current-change="goToPage" :current-page="datePage" 
              :page-size="20" layout="total, prev, pager, next, jumper" :total="countOfUsers">
            </el-pagination>
          </div>
  </div>
</div>

<Modal v-model="addUserV"  title="添加用户" @on-ok="submitAddUser" @on-cancel="cancelAddUser">
        <p>对话框内容</p>
</Modal>




</section>
<script >
    var content =new Vue({
        el:'#content',
        data:{
            date:'<?php echo date('Y-m-d') ?>',
            addUserV:false,
            dateMore:'',
            searchWord:'',
            users:[],
            rules:[],
            countOfUsers:0,
            multipleSelection: [],
        },
        created:function(){      
              this.$http.get('/user/getAll').then((response) => {this.users=response.data; this.countOfUsers = this.users.length;console.log('users,success')},(response) =>{ }); 
              this.$http.get('/rules/getAll').then((response) => {this.rules=response.data; console.log('rules,success')},(response) =>{ }); 
               
        },
        computed: {
          datePage: function () {
              return this.countOfUsers / 20;
            }
        },
        methods:{
              search:function(){
                  console.log(this.searchWord);
                  this.$http.get('/user/search/'+this.searchWord).then((response) => {this.users=response.data; this.countOfUsers = this.users.length;console.log('word,users,success')},(response) =>{ console.log(response);}); 
                  
              } ,
              yesterday:function(){
                  console.log('yesterday');
              },
              tomorrow:function(){
                  console.log('tomorrow');
              },
              submitAddUser:function(){
                  console.log('submitAddUser');
              },
              cancelAddUser:function(){
                  console.log('cancelAddUser');
              },
              lookRow:function(val){
                  console.log(val);
              },
              editRow:function(val){
                  console.log(val);
              },
              delRow:function(val){
                  console.log(val);
              },
              goToPage:function(){

              },
              checkChange:function(rows){
                     if (rows) {
                        rows.forEach(row => {
                          this.$refs.multipleTable.toggleRowSelection(row);
                        });
                      } else {
                        this.$refs.multipleTable.clearSelection();
                      }
              }, 
            checkOne(val) {
              this.multipleSelection = val;
            },
         },

  });
</script>




@endsection

@section('pagejs')

@endsection

        




